<template>
    <div class="menuBox">
        <!--  -->
        <!-- <div class="menuLeft"> -->
            <!--  -->
            <el-row class="con" :gutter="10">
                <el-col :span="8">
                    <div class="box-card classifyMenu" style="min-height: 300px;">
                        <el-card @click.native="changeClassify(item.classifyId)" :class="selectedClassify==item.classifyId?'active':''" ref="classify" style="font-size: 15px;text-align: center;padding: 5px 0;margin-bottom: 5px;" v-for="(item,i) in classify" :key="i">
                            <div style="padding: 10px 0;">
                                {{item.classifyName}}
                            </div>
                        </el-card>
                    </div>
                </el-col>
                <el-col style="overflow: scroll;padding-bottom: 50px">
                    <div style="min-height: 500px;" class="box-card">
                        <el-card class="box-card goodsItem" style="margin:10px;padding: 10px;"  v-for="(item,i) in showGoods" :key="i">
                            <!-- class="goodsItem" -->
                            <div class="goodsItemCon" style="display: flex;justify-content: space-between;">
                                <div class="goodsLeft" style="width: 120px">
                                    <el-image :fit="'cover'" style="width:100%;height:100%;border-radius: 5px;" :src="$url1+item.goodsImg">

                                    </el-image>
                                </div>
                                <div class="goodsRight">
                                    <h5 style="font-weight: 600;">{{item.goodsName}}</h5>
                                    <div class="taste">
<!--                                        <span v-for="(a,index) in item.goodsCharacteristics" :key="index">{{a}}</span>-->
                                        <el-tag size="mini" type="danger">{{item.goodsCharacteristics}}</el-tag>
                                    <!--<span>蟹脚</span>-->
                                    </div>
                                    <div class="goodsInfo" style="display: flex;flex-direction: column">
                                        <span style="margin: 5px 0">已售{{item.monthSales}}份</span>
                                        <span>好评度 85%</span>
                                    </div>
                                    <div class="price" style="display:flex;flex-direction:column;justify-content: center;">
                                        <div>
                                            <span class="priceNumber">
                                                <p style="align-self: flex-end;">￥</p><p class="number">{{item.goodsPrice}}</p>
                                            </span>
                                            <span style="text-decoration: line-through;align-self: flex-end;">
                                                ￥{{Math.floor(Math.random()*(item.goodsPrice*1.3-item.goodsPrice)+item.goodsPrice)}}
                                            </span>
                                        </div>
                                        <div class="buy" ref="buy">
                                            <transition
                                            @enter="enter"
                                            @before-enter="beforeEnter"
                                            @after-enter="afterEnter">
                                                <div v-show="ballFlag[i].flag==true" class="ball"></div>
                                            </transition>
                                            <!-- <i @click.stop="deleteFromCar(item.goodsId)" class="el-icon-minus"></i> -->
                                            <i style="align-self: flex-end" @click.stop="addToShopCar(item.goodsId)" class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>

        <!-- </div> -->
        <!-- <div  class="menuRight">
            <div class="menuRightCon">
                <el-card class="box-card" style="margin:10px"  v-for="(item,i) in showGoods" :key="i"> -->
                    <!-- class="goodsItem" -->
                    <!-- <div class="goodsLeft">
                        <img src="http://127.0.0.1:3000/static/img/goodsImg/1.jpg" alt="">
                    </div>
                    <div class="goodsRight">
                        <h5 style="font-weight: 600;">{{item.goodsName}}</h5>
                        <div class="taste">
                            <span v-for="a in item.taste">{{a}}</span> -->
                        <!--<span>蟹脚</span>-->
                        <!-- </div>
                        <div class="goodsInfo">
                            <span>月售0}</span>
                            <span>好评度 85%</span>
                        </div>
                        <div class="price">
                            <div>
                                <span class="priceNumber">
                                    <p style="align-self: flex-end;">￥</p><p class="number">{{item.goodsPrice}}</p>
                                </span>
                                <span style="text-decoration: line-through;align-self: flex-end;">
                                    ￥50
                                </span>
                            </div>
                            <span class="buy" ref="buy">
                                <transition
                                @enter="enter"
                                @before-enter="beforeEnter"
                                @after-enter="afterEnter">
                                    <div v-show="ballFlag[i].flag==true" class="ball"></div>
                                </transition>
                                <i @click.stop="deleteFromCar(item.goodsId)" class="el-icon-minus"></i>
                                <i style="align-self: flex-end" @click.stop="addToShopCar(item.goodsId)" class="el-icon-plus"></i>
                            </span>
                        </div>
                    </div>
                </el-card>
            </div>
        </div> -->
        <el-drawer
                title="提交订单"
                :append-to-body="true"
                :direction="'btt'"
                size="100%"
                :destroy-on-close="true"
                :visible.sync="innerDrawer">
            <pay @paySuc="paySuc" :selected="selected" :shop="shop" :totalPrice="totalPrice" :shippingFee="shop.shippingFee"></pay>
        </el-drawer>
        <el-drawer
                class="selected"
                title="已选商品"
                :visible.sync="drawer"
                :modal="false"
                :show-close="false"
                :direction="'btt'"
        style="overflow: auto">

            <div class="selectedContainer">
                <div class="selectedCon">
                    <div class="selectedItem" v-for="(item,i) in selected" :key="i">
                        <span style="justify-content: flex-start">{{item.goodsName}}</span>
                        <span>
                            ￥{{item.goodsPrice}}
                        </span>
                        <span style="justify-content: space-between;">
                        <i @click.stop="deleteFromCar(item.goodsId)" class="el-icon-minus"></i>
                        <i style="align-self: flex-end" @click.stop="addToShopCar(item.goodsId)" class="el-icon-plus"></i>
                    </span>
                    </div>
                    <div class="payBar">
                        <span>
                            请核对清单
                        </span>
                        <span>
                            共￥{{totalPrice}}
                        </span>
                        <span>
                            <el-button type="primary"  @click="settlement">去结算</el-button>
                        </span>
                    </div>
                </div>
            </div>

        </el-drawer>
        <div class="menuFooter" @click="drawer=!drawer">
            <div class="menuFooterCon">
                <div class="footerContainer">
                    <span class="footerLeft" ref="footerLeft">
                        <i class="el-icon-shopping-cart-2"></i>
                        购物清单
                    </span>
                    <span class="footerMiddle">另需配送费￥{{shop.shippingFee}}</span>
                    <span v-if="selected.length!=0">{{selected.length}}件,共￥{{totalPrice}}</span>
                    <span v-if="totalPrice<upToShipping" class="footerRight">￥{{upToShipping}}起送</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import pay from './pay.vue'
export default{
    props:['shop'],
    data(){
        return {
            ballFlag:[],
            innerDrawer:false,
            drawer: false,
            classify:'',
            selected:[],
            upToShipping:20,
            selectedClassify:'',
            showGoods:[],
            goods:[]
        }
    },
    components:{
        pay
    },
    created(){
        this.getClassify()
        this.getGoods()
        
        // this.$refs.classify[0].className='active'
        // this.selectedClassify = this.classify[0].classifyId
        // this.goods.forEach(item=>{
        //     item.selected=''
        //     // this.ballFlag.push({id:item.goodsId,flag:false})
        //     if(item.classifyId==this.classify[0].classifyId){
        //         this.showGoods.push(item)
        //     }
        //     // this.showGoods.push(item.classId==1)
        // })
    },
    methods:{
        paySuc(){
            this.innerDrawer = false
            this.drawer = false
            this.selected=[]
        },
        getClassify(){
            this.$axios({
                method:'get',
                params:{
                    shopId:this.$route.params.shopId
                },
                url:'/merchant/getClassifyWithGoods'
            }).then(r=>{
                // console.log(this.$route.params.shopId);
                
                this.classify = r.data.result
                this.selectedClassify = this.classify[0].classifyId
            })
        },
        getGoods(id){
            this.$axios({
                method:'get',
                params:{
                    shopId:this.$route.params.shopId
                },
                url:'/merchant/getGoodsByShopId'
            }).then(r=>{
                if(r.data.err_code===0){
                    this.goods = r.data.result
                    this.goods.forEach(item=>{
                if(item.classifyId==this.selectedClassify){
                    this.showGoods.push(item)
                    this.ballFlag.push({id:item.goodsId,flag:false})
                }   
            })
                }else{
                    this.$message.warning('该店铺暂时没有商品')
                }
            }).catch(err=>{
                this.$message.error('网络异常')
            })
        },
        settlement(){
            if(this.$store.state.user==null || this.$store.state.user ==''){
                return this.$message.warning('登录后才可以下单哦')
            }else if(this.selected.length==0){
                return this.$message.warning('您还没有选取商品哦')
            }else if(this.totalPrice<this.upToShipping){
                return this.$message.warning('您还没有达到订单起送条件哦')
            }
            this.innerDrawer=true
        },
        beforeEnter(el){
            el.style.transform="translate(-20px,0)"
        },
        enter(el,done){
            el.offsetWidth
            let targetPosition = this.$refs.footerLeft.getBoundingClientRect()
            let ballPosition = el.getBoundingClientRect()
            let x = targetPosition.left -ballPosition.left
            let y = targetPosition.top -ballPosition.top
            el.style.transform=`translate(${x}px, ${y}px)`
            // el.style.transition="all .5s cubic-bezier(.71,-0.57,.29,1.51)"
            el.style.transition="all .5s cubic-bezier(.69,-0.23,.86,.23)"
            // cubic-bezier(.4,-0.3,1,.68)
            done()
        },
        afterEnter(el){
            this.ballFlag.forEach(item=>{
                item.flag=false
            })
        },
        changeClassify(id,event){
            this.showGoods.length=0
            this.selectedClassify = id
            this.ballFlag = []
            this.goods.forEach(item=>{
                if(item.classifyId==id){
                    this.showGoods.push(item)
                    this.ballFlag.push({id:item.goodsId,flag:false})
                }   
            })
            
            // this.$refs.classify.forEach(item=>item.$el.children[0].children[0].classList.remove('active'))
            // event.path[0].classList.add('active')
        },
        addToShopCar(id) {
            const selectedGood = this.goods.find(item => item.goodsId == id);
            const target = this.goods.findIndex(item => item.goodsId == id)
            this.selected.push(selectedGood)
            // this.goods[target].selected += 1
            // this.ballFlag.forEach(item=>{
            //     if(item.id==id){
            //         item.flag=true
            //     }
            // })
            // this.ballFlag[id].flag=true
            var index = this.ballFlag.findIndex(item=>{
                return item.id==id
            })
            this.ballFlag[index].flag=true
        },
        deleteFromCar(id){
            const target1 = this.goods.findIndex(item => item.id == id)
            const target = this.selected.findIndex(item => item.id == id)
            // if(this.goods[target1].selected ==0){
            //     return this.$message.error('已经是0啦')
            // }
            this.selected.splice(target,1)
            // this.goods[target1].selected -= 1
        }
    },
    computed:{
        totalPrice(){
            if(this.selected.length!=0){
                return this.selected.reduce( ( totalPrice , item ) => (item.goodsPrice + totalPrice) ,0).toFixed(2)
            }
            return 0
        }
    },
    // created() {
    //     this.goods.forEach(item=>{
    //         this.ballFlag.push({id:item.id,flag:false})
    //     })
    // }
}
</script>
<style lang='less' scoped>
    .price{
        div{
            width: 100%;
        }
    }
    /deep/ .el-card__body{
        padding: 0;
    }
    /deep/ .el-drawer__header{
        margin: 0;
    }
    /deep/ .selected {
        overflow:auto;
        margin-bottom: 50px;
    }

    .selectedContainer{
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: auto;
        width: 100%;
        .selectedCon{
            width: 95%;
            height: 100%;
            display: flex;
            flex-direction: column;

            .selectedItem{
                padding: 5px 0;
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                font-size: 14px;
                span{
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    width: 25%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    i{
                        background: #FDC547;
                        color: black;
                        font-size: 15px;
                        height: 25px;
                        width: 25px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
            .payBar{
                position: fixed;
                background: white;
                width: 100%;
                bottom: 0;
                left: 0;
                display: flex;
                height: 55px;
                justify-content: space-around;
                span{
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    font-size: 15px;
                    .el-button{
                        /*margin-left: 10px;*/
                    }
                }
            }
        }

    }
    .active{
        font-size: 15px;
        font-weight: 800;
        background: white;
        transition: all .3s;
    }
/* .goodsItem{
        display: flex;
        flex-direction: row;
        width: 100%;
        padding: 5px;
        background-color: white;
        border-radius: 5px;
    } */
    /deep/ .goodsItem{
         el-card__body{
            display: flex;
        }
    }
    .taste{
        font-size: 10px;
        padding: 5px 0;
    }
    .taste span{
        padding: 0 5px;
        /*background-color: rgb(194, 191, 191);*/
        border-radius: 5px;
        margin-right: 5px;
    }
    .goodsInfo{
        font-size: 10px;
        color:#CACACA ;
    }
    .price{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: 10px;
        padding-top: 5px;
    }
    .price>div{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .buy{
        position: relative;
        .ball{
            z-index: 999;
            width: 25px;
            height: 25px;
            background: #FDC547;
            border-radius: 50%;
            position: absolute;
            right: 0;
            top: 0
        }
        border-radius: 5px;
        background:whitesmoke;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .buy i{
        width: 25px;
        height: 25px;
        font-weight: 800;
        color: black;
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .priceNumber{
        color: #FE4E3B;
        display: flex;
        margin-right: 10px;
        .number{
            font-size: 20px;
        }
    }
    .goodsRight{
        padding-left: 10px;
        flex: 1;
    }
    .menuRightCon{
        width: 95%;
        height: 100%;
        display: flex;
        margin-top: 8px;
        flex-wrap: wrap;
        flex-direction: column;
        overflow-y: scroll;
        padding-bottom: 50px;
    }
    .menuBox{
        display: flex;
        flex-direction: row;
        width: 100%;
        min-height: 100%;
        justify-content: center;
    }
    .con{
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        /* .classifyMenu{
            flex: 1;
        } */
    }
    .menuFooter{
        position: absolute;
        bottom: 70px;
        width: 100%;
        
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menuFooterCon{
        background-color: #090909;
        width: 90%;
        height: 100%;
        border-radius: 30px;
        color: #828282;
        font-size: 10px;
    }
    .footerContainer{
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .footerLeft{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-right: 20px;
        border-right: 2px solid white;
        color: #FBCD67;
    }
    .footerLeft i{
        font-size: 20px;
    }
    .footerRight{
        font-size: 13px;
    }
    .menuLeft{

        display: flex;
        justify-content: center;
        flex: 2;
        background-color: whitesmoke;
        margin-bottom: 50px;
        overflow-y: scroll;
        
    }
    .menuLeft>div{
        width: 100%;
    }
    .menuLeft>div div{
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .menuRight{
        flex:8;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .menuCon{
        width: 95%;
        display: flex;
        flex-direction: column;
        padding-top: 36px;
    }
    .menuNav{
        font-size: 20px;
        display: flex;
        flex-direction: row;
        height: 50px;
        align-items: center;
    }
    .menuNav span{
        margin-right: 30px;
    }
.keyword{
        width: 80px;
        height: 25px;
    }
    .merchant{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .merchantContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: whitesmoke;
    }
    .headBar{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .headBar>div{
        padding-top: 10px;
        padding-bottom: 30px;
        width: 95%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .headBar i{
        font-size: 25px;
        padding: 0 5px;
    }
    .merchantInfo{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 120px;
    }
    .InfoBox{
        background-color: white;
        width: 95%;
        height:100px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
        box-shadow: 2px 2px 2px;
    }
    .InfoTitle{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .InfoSubTitle{
        margin: 3px 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 10px;
    }
    .InfoSubTitle span{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-right: 5px;
        font-size: 10px;
    }
    .InfoSubTitle i{
        padding-right: 3px;
        color: #EEA071;
    }
    .merchantAvatar{
        width: 60px;
        margin-right: 10px;
        position: absolute;
        right: 12px;
        top: 44px;
    }
    .notice{
        width: 100%;
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        font-size: 10px;
        color: #BCBCBC;
    }
    .sale{
        width: 100%;
        margin-left: 10px;
        display: flex;
        flex-direction: row;
        font-size: 10px;
        margin: 5px 0;
    }
    .sale span{
        padding: 0 5px;
        color: #E26462;
        border: 1px solid #F8F0EC;
        margin: 0 3px;
    }
</style>